import React ,{useState}from 'react'
import { Outlet } from 'react-router-dom'
import classNames from 'classnames'
import './Home.css'
import hotPic from '../../assets/imgs/icon_main.png'
import hotPic2 from '../../assets/imgs/icon_main_s.png'
import cinPic from '../../assets/imgs/icon_chat.png'
import cinPic2 from '../../assets/imgs/icon_chat_s.png'
import myPic from '../../assets/imgs/icon_history.png'
import myPic2 from '../../assets/imgs/icon_history_s.png'


export default function Home() {
  const [active,setActive]=useState(0)
  const [tabArr,setTabArr]=useState([
    {
      text:"热映",
      src:[hotPic,hotPic2],
      to:"/home/movie"
    },
    {
      text:"影院",
      src:[cinPic,cinPic2],
      to:"/home/cinemal"
    },
    {
      text:"我的",
      src:[myPic,myPic2],
      to:"/home/my"
    }
  ])

  const toTab=(to,i)=>{
    setActive(i)
    window.location.hash=to
  }
  return (
    <div>
      <Outlet></Outlet>
      <div className="tabs">
        {
          tabArr.map((v,i)=><div className={classNames('tab',{checked:active==i})} onClick={toTab.bind(this,v.to,i)} key={v.text}>
            <img src={active==i?v.src[1]:v.src[0]} alt="pic" />
            <div className="text">{v.text}</div>
          </div> )
        }
      </div>
    </div>
  )
}

